// import {useEffect,useState} from 'react';
// import { IRouteComponentProps } from 'umi'
// import TeachersL from "./teachers";
// import Student from "./students";

// const Layout: React.FC<IRouteComponentProps> = (props) => {
//     let [isMobile,setIsMobile] = useState(false);
//     useEffect(()=>{
//         let handleResize = ()=>{
//             if(window.innerWidth < 992){
//                 setIsMobile(true);
//             }else{
//                 setIsMobile(false)
//             }
//         };
//         window.addEventListener('resize',handleResize);
//         return ()=>{
//             window.removeEventListener('resize',handleResize);
//         }
//     },[]);
//     // 在移动端渲染提示
//     if(isMobile){
//         return <p>请在PC断打开使用</p>
//     }

//     console.log(props.location.pathname);
//     // 如果是老师端的话
//     if (/\/teachers/.test(props.location.pathname)) {
//         return <TeachersL>{props.children}</TeachersL>
//     // 如果是学生端的话
//     }else if(/\/student/.test(props.location.pathname)){
//           return  <Student>{props.children}</Student>
//     }
//     return props.children
// }
// export default Layout



// 使用媒体查询处理
import {useEffect,useState} from 'react';
import { IRouteComponentProps } from 'umi'
import TeachersL from "./teachers";
import Student from "./students";

const Layout: React.FC<IRouteComponentProps> = (props) => {

    let content = props.children;

    console.log(props.location.pathname);
    // 如果是老师端的话
    if (/\/teachers/.test(props.location.pathname)) {
        content = <TeachersL>{props.children}</TeachersL>
    // 如果是学生端的话
    }else if(/\/student/.test(props.location.pathname)){
        content = <Student>{props.children}</Student>
    }

    return <div style={{width:"100%",height:"100%"}}>
        <p className='layout-mobile' style={{width:"100%",height:"100%"}}>请在pc端打开使用</p>
        <div className='layout-pc' style={{width:"100%",height:"100%"}}>
            {content}
        </div>
    </div>
}  
export default Layout